<html>

<head>
    <meta charset="utf-8">
    <meta name="author" content="范珍">
    <title>vue进阶--7 render函数</title>
    <script src='vue.js'></script>
</head>

<body>
    <div id='app'>
        <my-com>这是一个自定义组件</my-com>
    </div>
    <script>
        Vue.component('my-com', {
            // 绝大多数情况下,使用template创建组件视图模板
            // render函数是创建组件模板的另一种选择(偶尔用到)
            // render参数：
                // createElement:这是一个函数,可以用来创建标签
                        // para1:标签名
                        // para2：标签内容
                        // this.$slots.default:匿名插槽的内容
            // render返回值：视图模板
            render:function(creatElement){
                return creatElement(
                    'div',
                    [
                        creatElement('h1',this.$slots.default),
                        creatElement('p','这是一个p标签')
                    ]
                    );
            }
        })
        new Vue({
            el: '#app'
        })
    </script>
</body>

</html>

